<template>
  <div class="container">
    <!-- 试题描述 -->
    <div class="questionDescription">
      <el-row style="border-bottom:0">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【题型】:
            {{
              questionDetail.questionType === 1
                ? "单选"
                : questionDetail.questionType === 2
                ? "多选"
                : "简答"
            }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            【编号】:
            <span v-html="questionDetail.id"></span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【难度】:
            {{
              questionDetail.difficulty === 1
                ? "简单"
                : questionDetail.difficulty === 2
                ? "一般"
                : "困难"
            }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            【标签】: {{ questionDetail.tags }}
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【学科】: {{ questionDetail.subjectName }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            【目录】: {{ questionDetail.directoryName }}
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            【方向】: {{ questionDetail.direction }}
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 题干 -->
    <el-row class="question">
      <el-col :span="24">
        <!-- 题干 -->
        <div class="grid-content bg-purple">
          【题干】:
          <span v-html="questionDetail.question"></span>
        </div>
        <!-- 试题选项及答案 -->
        <div class="grid-content bg-purple">
          <!-- 单选题时显示 questionType为1 -->
          <div class="radioWarpper" v-if="questionDetail.questionType === '1'">
            <p>单选题 选项：（以下选中的选项为正确答案)</p>
            <el-radio-group v-model="radio">
              <el-radio
                style="pointer-events:none"
                :label="obj.isRight"
                v-for="obj in questionDetail.options"
                :key="obj.id"
                >{{ obj.title }}</el-radio
              >
            </el-radio-group>
          </div>
          <!-- 多选题时显示 questionType为2 -->
          <div
            class="checkboxWarpper"
            v-if="questionDetail.questionType === '2'"
          >
            <p>多选题 选项：（以下选中的选项为正确答案)</p>
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                style="pointer-events:none"
                :label="obj.isRight"
                v-for="obj in questionDetail.options"
                :key="obj.id"
                >{{ obj.title }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 参考答案 -->
    <el-row class="answer">
      <el-col :span="24">
        <div class="grid-content bg-purple">
          【参考答案】:
          <el-button type="danger" size="small" @click="videoShowHandle"
            >视频答案预览</el-button
          >
          <div class="videoWrapper" v-if="questionDetail.videoURL !== ''">
            <video
              controls="controls"
              v-if="videoShow"
              autoplay
              style="width:300px;"
            >
              <source :src="questionDetail.videoURL" type="video/mp4" />
            </video>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 答案解析 -->
    <el-row class="answerKeys">
      <el-col :span="24">
        <div class="grid-content bg-purple">
          【答案解析】:
          <span v-html="questionDetail.answer"></span>
        </div>
      </el-col>
    </el-row>
    <!-- 题目备注 -->
    <el-row class="remarks" style="border-bottom:0">
      <el-col :span="25">
        <div class="grid-content bg-purple">
          【题目备注】: {{ questionDetail.remarks }}
        </div>
      </el-col>
    </el-row>
    <el-row class="closeBtn">
      <el-button type="primary" size="small" @click="$emit('closeEvent')"
        >关闭</el-button
      >
    </el-row>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'QuestionsPreview',
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      videoShow: false,
      questionDetail: {}, // 试题详细信息
      radio: 1, // 单选框默认选中
      checkList: [1]
    }
  },
  created () {
    this.getQuestionDetail()
  },
  methods: {
    // 点击视频预览，显示视频
    videoShowHandle () {
      this.videoShow = true
    },
    // 获取试题详情
    async getQuestionDetail () {
      const res = await detail({ id: this.id })
      // console.log(res.data.videoURL)
      this.questionDetail = res.data
    }
  }
}
</script>

<style scoped>
.el-row {
  margin: 15px 0;
  border-bottom: 2px solid #ccc;
  padding-bottom: 10px;
}
.videoWrapper {
  margin: 10px 0;
}
/* .radioWarpper {
  margin: 10px 0;
} */
.el-radio {
  display: block;
  margin: 10px 0;
}
.el-checkbox-group .el-checkbox {
  display: block;
  margin: 10px 0;
}
.closeBtn {
  border-bottom: 0;
  text-align: center;
}
input:disabled {
  border: 1px solid #ddd;
  background-color: #f5f5f5;
  color: #aca899;
}
</style>
